<template>
	<div class="followbutton">
		<div class="followbutton_item"><span><img :src="item.userico" /></span><span>{{item.username}}</span></div>
		<div class="followbutton_item">
			<a href="javascript:;" class="on" @click="delFollowClickHandle" :data-id="item.userid" v-if="type === 'follow'" :data-name="item.username">取消关注</a>
		</div>
	</div>
</template>
<script>
	import Axios from "axios";
	import qs from "Qs";
	export default{
		name: 'followbutton',
		data: function(){
			return {
				isFollow:true
			}
		},
		props:["item", "currentUser", "type"],
		mounted:function(){
			if (this.$props.type === 'follower') this.$set(this, "isFollow", false)
		},
		methods:{
			delFollowClickHandle(e){
				const that = this;
				let id = $(e.target).attr("data-id"),
					name = $(e.target).attr("data-name");
				Axios.post(this.$store.state.api.postDelFollow, qs.stringify({
					followusername:name,
					followuserid:id,
					username: that.$props.currentUser.name,
					userid:that.$props.currentUser.id,
					email:that.$props.currentUser.email
				})).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$emit("refreshFollows", that.$props.currentUser)
					}else{
						
					}
				}).catch((err) => {
					console.log(err)
					
				})
			},
			addFollowClickHandle(e){
				const that = this;
				let id = $(e.target).attr("data-id"),
					name = $(e.target).attr("data-name");
				Axios.post(this.$store.state.api.postAddFollow, qs.stringify({
					followusername:name,
					followuserid:id,
					username: that.$props.currentUser.name,
					userid:that.$props.currentUser.id,
					email:that.$props.currentUser.email
				})).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$emit("refreshFollows", that.$props.currentUser)
					}else{
						
					}
				}).catch((err) => {
					console.log(err)
					
				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.followbutton{
		padding:10/@base 20/@base;
		font-size: 20/@base;
		display:flex;
		.followbutton_item{
			display:flex;
			width:80%;
			&:last-child{
				text-align: center;
				width:20%;
			}
			span{
				display: block;
				width:90%;
				line-height: 48/@base;
				&:first-child{
					width:48/@base;
					height:48/@base;
					border-radius: 48/@base;
					background-color: #efefef;
					margin:0 10/@base 0 0;
				}
				img{
					width:100%;
				}
			}
			a{
				width:100%;
				display:block;
				line-height: 48/@base;
				text-decoration: none;
				border:1/@base solid #ccc;
				border-radius: 5/@base;
				color:#333;
				background-color: #f6f8fa;
				font-size: 20/@base;
				&.on{
					background-color: #efefef;
					color:#999;
				}
			}
		}
	}
</style>